<template>
  <div>
    <div class="star" :class="'star-' + size"><!--这个24表示的是用css中24大小的属性-->
      <span class="star-item"
            v-for="(sc, index) of starClasses"
            :class="sc"
            :key="index"
      >
      </span>
    </div>
  </div>
</template>

<script>
// 类名常量
const CLASS_ON = 'on' // 整数
const CLASS_HALF = 'half' // 是否显示半星
const CLASS_OFF = 'off' // 是否显示无星星状态
// 3.2 = 3 + 0 +2 整星 + 半星 + 灰星
// 3.5 = 3 + 1 +1 出现半心 小数部分大于等于0.5
export default {
  name: 'Star',
  props: {
    score: Number,
    size: Number
  },
  computed: {
    starClasses () {
      const {score} = this
      const scs = []
      // *向scs中添加N个CLASS_ON
      const scoreInteger = Math.floor(score)
      for (let i = 0; i < scoreInteger; i++) { // 后台所有传的数据进行循环
        scs.push(CLASS_ON)
      }

      // *向scs中添加0或者1个个CLASS_HALF
      if (score * 10 - scoreInteger * 10 >= 5) { // 半颗星星
        scs.push(CLASS_HALF)
      }

      // *向scs中添加N个CLASS_OFF
      while (scs.length < 5) { // 当他的个数小于五个的时候 比如四的时候，他就会显示一个灰色星星
        scs.push(CLASS_OFF)
      }
      // for循环
      // for (let i = scs.length; i < 5; i++) {
      //   scs.push(CLASS_OFF)
      // }

      return scs
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixins.styl"
  .star // 2x图 3x图
    float left
    font-size 0
    .star-item
      display inline-block
      background-repeat no-repeat
    &.star-48
      .star-item
        width 40px
        height 40px
        margin-right 44px
        background-size 40px 40px
        &:last-child
          margin-right: 0
        &.on
          bg-image('./images/star48_on')
        &.half
          bg-image('./images/star48_half')
        &.off
          bg-image('./images/star48_off')
    &.star-36
      .star-item
        width 30px
        height 30px
        background-size 30px 30px
        &:last-child
          margin-right 0
        &.on
          bg-image('./images/star36_on')
        &.half
          bg-image('./images/star36_half')
        &.off
          bg-image('./images/star36_off')
    &.star-24
      .star-item
        width 20px
        height 20px
        background-size 20px 20px
        &:last-child
          margin-right 0
        &.on
          bg-image('./images/star24_on')
        &.half
          bg-image('./images/star24_half')
        &.off
          bg-image('./images/star24_off')
</style>
